<template>
  <div class="container">
    <div class="item" v-for="item in projects" :key="item._id">
      <a-card style="width: 100%" hoverable @click="handleClick(item)">
        <template #title>
          <h2 class="title">{{ item.title }}</h2>
        </template>
        <img class="cover-image" :src="item.cover" :alt="item.title" />
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getDashboardApi } from '@/api/dashboard'

const router = useRouter()
const projects = ref([])

const handleClick = (item: any) => {
  router.push(`/detail/${item._id}`)
}

const getDashboard = async () => {
  let res: any = await getDashboardApi()
  if (res.errCode === 0) {
    projects.value = res.data
  }
}

onMounted(() => {
  getDashboard()
})
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  display: grid;
  min-width: 350px;
  // grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  transition: all 0.5s ease-in-out;

  .title {
    text-transform: uppercase;
    text-align: center;
  }

  .cover-image {
    width: 100%;
    height: 100%;
  }
}

:deep(.ant-card-body) {
  box-sizing: border-box;
  overflow: hidden;
  padding: 0;
  height: 220px;
}

// 屏幕小于等于750 grid-template-columns 变成一行
@media (max-width: 750px) {
  .container {
    grid-template-columns: 1fr; /* 屏幕小于等于750px时改为1列 */
  }
  :deep(.ant-card-body) {
    height: auto;
    max-height: 400px;
  }
}

@media (min-width: 750px) and (max-width: 1050px) {
  .container {
    grid-template-columns: 1fr 1fr; /* 屏幕大于750px且小于等于1050px时改为2列 */
  }
  :deep(.ant-card-body) {
    height: 230px;
    max-height: 280px;
  }
}
</style>
